<!doctype html>
<html>
  <head>
    <meta charset="utf-8"></meta>
    <title>base 2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../vendor/font-awesome/4.2.0/css/font-awesome.min.css">
    
    <link rel="stylesheet" href="../assets/css/base_m.css">
    <link rel="stylesheet" href="docs.css">
    
    <style>
    




    </style>
   
  
  </head>
  <body class="" data-spy="scroll" data-target="#scrollspy">
    <div class="fixed-tools">
      
      <div class="backtop in">
          <div class="icon-wrap"><i class="if icon-backtop"></i>回到顶部</div>
      </div>
    </div>
      

    <div class="header">
      <div class="header-content">
        <div class="title-area"><a href="/" class="c-primary">Base UI</a></div>
      </div>
    </div>
    <div class="banner" id="banner">
      <h2>2.0 开发使用文档</h2>
      <p>Drive me crazy</p>
    </div>
    <div class="content flex">

      <div class="sidebar" style="width: 200px; " id="scrollspy">
        <nav class="book-summary"  id="nav-list" style="width: 200px; height: 500px;overflow-y: auto;">
          <ul class="summary books nav sidenav navbar">
            <li>
              <a href="http://www.auicss.com">2.0开发文档</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#content-1">2.0概述</a>
              </li>
              <li>
                <a href="#content-2">基本结构/辅助元素</a>
              </li>
              <li>
                <a href="#content-5">导航栏</a>
              </li>
              <li>
                <a href="#content-10">按钮</a>
              </li>
              <li>
                <a href="#content-11">标签/角标/圆点</a>
              </li>
              <li> 
                <a href="#content-12">布局</a>
                <ul class="nav ">
                  <li><a href="#layout1">列表布局</a></li>
                  <li><a href="#layout2">图文布局</a></li>
                </ul>
              </li>
              <li>
                <a href="#content-14">表单</a>
              </li>
              <li>
                <a href="#content-28">图标</a>
              </li>
              <li>
                <a href="#content-32">JS组件-dialog</a>
              </li>
              
              <li>
                <a href="#content-35">JS组件</a>
                <ul class="nav ">
                  <li><a href="#component-tabs">tabs 标签页</a></li>
                  <li><a href="#component-tooltip">tooltip 文字提示</a></li>
                  <li><a href="#component-popover">Popover 弹出框</a></li>
                  <li><a href="#component-datepicker">datepicker 日期选择器</a></li>
                  <li><a href="#component-pagination">pagination 分页</a></li>
                  <li><a href="#component-dropdown">dropdown 下拉菜单</a></li>
                  <li><a href="#component-carousel">carousel 走马灯</a></li>
                  <li><a href="#component-collapse">collapse 折叠面馆</a></li>
                  <li><a href="#component-cityselect">cityselect 城市选择</a></li>
                  
                </ul>
              </li>
              
              
            </ul>
        </nav>
      </div>
      <div class="main flex-1">

        <article id="content-1">
          <h3 class="page-header">2.0概述</h3>
          <div class="book-content">
            <p>兼容IOS 7+ 到Android 4.4+。</p>
            <p>html默认定义的尺寸为20px，那么1rem=20px；开发者在定义尺寸及字号时可以根据此比例来控制，比如，14px = 0.7rem*20。</p>

          </div>
        </article>
        
        <article id="content-2">
          <h3 class="page-header">基本结构/辅助元素</h3>
          <div class="book-content">
            <p>.ellipsis 单行文字，超出自动省略</p>

            <p>.ellipsis-ln-2 两行文字，超出自动省略</p>

            <p>.p位置-数值 （pt-1）： 控制某个方向的内边距剧，位置有t（顶部），b（顶部），l（左侧），r（右侧），数值有0，1，...，20</p>

            <p>.m位置-数值，控制某个方向的外边距，位置有t（顶部），b（顶部），l（左侧），r（右侧），数值有0，1，...，20</p>

            <p>.fz-small(12px) .fz-base(14px) .fz-medium(16px) .fz-large(18px) .fz-x-large(20px) .fz-xx-large(24px) .fz-xxx-large(30px)</p>
            <p>.c-颜色名，字体颜色，颜色名有 default，primary，success，info，warning，danger，pink，purple，indigo，alt</p>

            

            <p>.tal 左对齐</p>

            <p>.tar 右对齐</p>

            <p>.db 显示</p>

            <p>.dn 隐藏（隐藏容器不占空间）</p>

            <p>.invisible 隐藏（隐藏后继续占用布局空间）</p>


            <p>&nbsp;</p>

            <p>常用色值的对应</p>

            <p class="c-default">default &nbsp; &nbsp; &nbsp;#212121</p>

            <p class="c-primary">primary &nbsp; &nbsp; &nbsp;#00bcd4</p>

            <p class="c-success">success &nbsp; &nbsp; &nbsp;#009688</p>

            <p class="c-info">info &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#03a9f4</p>

            <p class="c-warning">warning &nbsp; &nbsp; &nbsp;#ffc107</p>

            <p class="c-danger">danger &nbsp; &nbsp; &nbsp; #e51c23</p>

            <p class="c-pink">pink &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #e91e63</p>

            <p class="c-purple">purple &nbsp; &nbsp; &nbsp; &nbsp; #673ab7</p>

            <p class="c-indigo">indigo &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#3f51b5</p>

            <p class="c-alt">alt &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#987346</p>

            <section class="">
              <div class="c-text">c-text</div>
              <div class="c-3">c-3</div>
              <div class="c-4">c-4</div>
              <div class="c-5">c-5</div>
              <div class="c-6">c-6</div>
              <div class="c-7">c-7</div>
              <div class="c-8">c-8</div>
              <div class="c-9">c-9</div>
              <div class="c-a">c-a</div>
              <div class="c-b">c-b</div>
              <div class="c-c3">c-c3</div>
              <div class="c-c">c-c</div>
              <div class="c-d4">c-d4</div>
              <div class="c-d">c-d</div>
              <div class="c-e6">c-e6</div>
              <div class="c-e">c-e</div>
              <div class="c-f5">c-f5</div>
              <div class="c-f9">c-f9</div>
            </section>
            <h1>标题一 H1</h1>
            <h2>标题二 H2</h2>
            <h3>标题三 H3</h3>
            <h4>标题四 H4</h4>
            <h5>标题五 H5</h5>
            <h6>标题六 H6</h6>
          </div>    
        </article>

        
          
       

        <article id="content-5">
          <h3 class="page-header">导航栏</h3>
          <div class="book-content">
              <p>案例代码</p>
          </div>
          <div class="flex">
            <div class="code flex-1 pr-9">
              <textarea class="code-content" style="width: 100%;" data-target="code1"></textarea>
            </div>
            <div class="example-box">
              <iframe class="example" src="base_bar.html"></iframe>
            </div>
          </div>
        </article>

        <article id="content-10">
          <h3 class="page-header">按钮</h3>
          <div class="book-content">
            <p>2.0中按钮按照Google Material 设计规范提供了多个色值的样式</p>
          </div>
          <div class="flex">
            <div class="code flex-1 pr-9">
              <textarea class="code-content" style="width: 100%;" data-target="code10"></textarea>
            </div>
            <div class="example-box">
              <iframe class="example" src="base_btn.html"></iframe>
            </div>
          </div>
        </article>

        <article id="content-11">
          <h3 class="page-header">标签</h3>
          <div class="book-content">
            <p></p>
          </div>
          <div class="flex">
            <div class="code flex-1 pr-9">
              <textarea class="code-content" style="width: 100%;" data-target="code11"></textarea>
            </div>
            <div class="example-box">
              <iframe class="example" src="base_tag.html"></iframe>
            </div>
          </div>
        </article>

        <article id="content-12">
          <h3 class="page-header">布局</h3>
          <a id="layout1" class="snippet_a">普通列表</a>
          <p class="component-description">列表是常用的UI控件，如下为示例代码</p>

          
          <figure class="highlight">
            <textarea class="code-content" style="width: 100%;" data-target="code-layout1"></textarea>
          </figure>
          <div class="dm-content example" id="code-layout1">
            <ul class="">
              <li>
                <a class="pt-6 pb-6 bb flex aic" href="/msg/proj.html">
                    <div class="flex-1">项目动态</div>
                    <div>
                        <i class="if icon-angle-right"></i>
                    </div>
                </a>
              </li>
              <li>
                <a class="pt-6 pb-6 bb flex aic" href="/msg/proj.html">
                    <div class="flex-1">项目动态</div>
                    <div>
                        <i class="if icon-angle-right"></i>
                    </div>
                </a>
              </li>
              <li>
                <a class="pt-6 pb-6 bb flex aic" href="/msg/proj.html">
                    <div class="flex-1">项目动态</div>
                    <div>
                        <i class="if icon-angle-right"></i>
                    </div>
                </a>
              </li>
            </ul>
            
          </div>

          <a id="layout2" class="snippet_a">图文列表</a>
          <p class="component-description">如下为示例代码</p>
          <figure class="highlight">
            <textarea class="code-content" style="width: 100%;" data-target="code-layout2"></textarea>
          </figure>
          <div class="dm-content example" id="code-layout2">
            <ul class="">
              <li class="flex p-6 bgc-w mb-5 bb">
                <div class="">
                  <img src="../assets/img/avatar-80.png" alt="" >
                </div>
                <div class="flex-1 pl-5">
                    <a href="javascript:;">我是标题</a>
                    <div class="ellipsis-ln-2 c-a fz-small">这里是一些乱七八糟的简介，这里是一些乱七八糟的简介啊啊啊啊啊吖啊啊啊吖</div>
                </div> 
              </li>
              <li class="flex p-6 bgc-w mb-5 bb">
                <div class="">
                  <img src="../assets/img/avatar-80.png" alt="" >
                </div>
                <div class="flex-1 pl-5">
                    <a href="javascript:;">我是标题</a>
                    <div class="ellipsis-ln-2 c-a fz-small">这里是一些乱七八糟的简介，这里是一些乱七八糟的简介啊啊啊啊啊吖啊啊啊吖</div>
                </div> 
              </li> 
              </li>
              
            </ul>
            
          </div>

        </article>

        <article id="content-14">
          <h3 class="page-header">表单</h3>
          <div class="" >
            <div class="dm-demo-dom dm-content example" id="code-form">
              <!-- 块状form -->
              <div class="form-wrapper" >
                <div class="ctrl-wrap flex aic form-group mb-7">
                  <div class="w-6em form-label">
                    <label for="">你的名字:</label>
                  </div>
                  <div class="flex-1 form-field">
                    <input type="text">
                  </div>
                </div>
                <div class="ctrl-wrap flex aic form-group mb-7">
                  <div class="w-6em">
                    <label for="">所属行业:</label>
                  </div>
                  <div class="flex-1">
                    <select class="select">
                      <option value="">教育行业</option>
                      <option value="">游戏行业</option>
                      <option value="">互联网信息技术行业</option>
                    </select>
                  </div>
                </div>
                <div class="ctrl-wrap flex aic form-group mb-7">
                  <div class="w-6em form-label">
                    <label for="">单身时间:</label>
                  </div>
                  <div class="flex-1 form-field">
                    <div class="radio-circle">
                      <span class="dib vam mr-5">
                        <input type="radio" name="dd" value="1" id="d1"><label class="dummy-check" for="d1"></label>
                        <label for="d1">1-3年</label>
                      </span>
                      <span class="dib vam mr-5">
                        <input type="radio" name="dd" value="1" id="d2"><label class="dummy-check" for="d2"></label>
                        <label for="d2">5-9年</label>
                      </span>
                      <span class="dib vam mr-5">
                        <input type="radio" name="dd" value="1" id="d3"><label class="dummy-check" for="d3"></label>
                        <label for="d3">11年</label>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="ctrl-wrap flex  form-group mb-7">
                  <div class="w-6em form-label">
                    <label for="">你的爱好:</label>
                  </div>
                  <div class="flex-1 form-field">
                    <div class="check-square">
                      <span class="db mb-3">
                        <input type="checkbox" name="dd" value="1" id="dd1"><label class="dummy-check" for="dd1"></label>
                        <label for="dd1">足球</label>
                      </span>
                      <span class="db mb-3">
                        <input type="checkbox" name="dd" value="1" id="dd2"><label class="dummy-check" for="dd2"></label>
                        <label for="dd2">游戏</label>
                      </span>
                      <span class="db mb-3">
                        <input type="checkbox" name="dd" value="1" id="dd3"><label class="dummy-check" for="dd3"></label>
                        <label for="dd3">购物</label>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="ctrl-wrap flex  form-group mb-7">
                  <div class="w-6em form-label">
                    <label for="">人生格言:</label>
                  </div>
                  <div class="flex-1 form-field">
                    <textarea class=""></textarea>
                  </div>
                </div>
                <div class="ctrl-wrap flex  aic form-group mb-7">
                  <div class="w-6em form-label">
                    <label for="">上传头像:</label>
                  </div>
                  <div class="flex-1 form-field">
                    <div id="picker"> <span>选择要上传的文件</span> </div>
                  </div>
                </div>
                <div class="form-action">
                  <div class="dib w-6em"></div><button class="btn-primary">提交</button>
                </div>


              </div>
              <!-- 行内form -->
              <div class="form-wrapper form-inline mt-12" >
                <div class="ctrl-wrap flex aic form-group mr-7">
                  <div class="form-label">
                    <label for="">age:</label>
                  </div>
                  <div class="flex-1 form-field">
                    <input type="text" style="width: 30px;">
                  </div>
                </div>
                <div class="ctrl-wrap flex aic form-group mr-7">
                  <div class="form-label">
                    <label for="">name:</label>
                  </div>
                  <div class="flex-1 form-field">
                    <input type="text" style="width: 30px;" class="square">
                  </div>
                </div>
              </div>

            </div>
            <figure class="highlight">
              <textarea class="code-content" style="width: 100%;" data-target="code-form"></textarea>
            </figure>
          </div>
          
        </article>

        <article id="content-28">
          <h3 class="page-header">图标</h3>
          <div class="book-content">
            <p></p>
          </div>
          <div class="flex">
            
            <div class="example-box" style="width: 100%;">
              <iframe class="example" src="font/demo_fontclass2.html" style="width: 100%;"></iframe>
            </div>
          </div>
        </article>

        <article id="content-32">
          <h3 class="page-header">dialog</h3>
          <div class="book-content">
            <p></p>
          </div>
          <div class="flex">
            <div class="code flex-1 pr-9">
              <textarea class="code-content" style="width: 100%;" data-target="code32"></textarea>
            </div>
            <div class="example-box" >
              <iframe class="example" src="base_modal.html" ></iframe>
            </div>
          </div>
        </article>

        <article >
          <h3 id="content-35" class="page-header">js组件</h3>
          <a id="component-tabs" class="snippet_a">tabs 标签页</a>
          <p class="component-description">如下为示例代码</p>
          <div class="flex">
            <div class="code flex-1 pr-9">
              <textarea class="code-content" style="width: 100%;" data-target="code35"></textarea>
            </div>
            <div class="example-box" >
              <iframe class="example" src="base_tab.html" style="height: 200px;"></iframe>
            </div>
          </div>
          <!-- tooltip 文字提示 -->
          <a id="component-tooltip" class="snippet_a">tooltip 文字提示</a>
          <div class="demo-block demo-box">
            <div class="source">

              <div class="box" >
                <button type="button" class="btn btn-o" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
                <button type="button" class="btn btn-o" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
                <button type="button" class="btn btn-o" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
                <button type="button" class="btn btn-o" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
              </div>
            </div>
            <div class="meta">
              <div class="description"><code>title</code>决定显示的内容,<code>data-placement</code>来决定<code>hover</code>时提示信息的位置</div>
              <div class="highlight">
                
              </div>
            </div>
            <div class="demo-block-control">
              <span>显示代码</span>
            </div>
          </div>

          <!-- popover 弹出框 -->
          <a id="component-popover" class="snippet_a">popover 弹出框</a>
          <div class="demo-block demo-box">
            <div class="source">
              <div class="box" style="width: 500px;margin: 0 auto;">
                <button type="button" class="btn btn-o" data-toggle="popover" data-placement="left" title="left" data-content="标题为自己的title属性 失去焦点可以消失 data-trigger=focus " data-trigger="focus">left</button>

                <button type="button" class="btn btn-o" data-container="body" data-toggle="popover" data-placement="top" data-content="踢踢腿体统吞吞吐吐">top</button>
                <button type="button" class="btn btn-o" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">right</button>
                <button type="button" class="btn btn-o" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">bottom</button>

                <button data-trigger="click" id="btn-popover1" type="button" class="btn btn-o" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content="<div class='p-5'>这是一段内容这是一段内容确定删除吗？</div><div class='tar'><button data-dismiss='popover' data-target='#btn-popover1' class='btn-tiny btn-athens mr-3'>取消</button><button class='btn-tiny btn-primary' data-target='#btn-popover1' data-role='action1'>确认</button></div>">删除</button>

              </div>
            </div>
            <div class="meta">
              <div class="description"><code>data-html</code>true,false 来决定是否可以显示html字符串</div>
              <div class="highlight">
                
              </div>
            </div>
            <div class="demo-block-control">
              <span>显示代码</span>
            </div>
          </div>

          <!-- datepicker 弹出框 -->
          <a id="component-datepicker" class="snippet_a">datepicker 日期选择</a>
          <div class="demo-block demo-box">
            <div class="source">
              <div class="box" >
                <div class="ctrl-wrap datepicker">
                  <input type="text" class=" laydate-icon layui-input" placeholder="" id="datepicker1" style="width: 200px;">
                </div>

              </div>
            </div>
            <div class="meta">
              <div class="description">
                依赖<code>/vendor/laydate/laydate.js</code>
                参数format: 'YYYY-MM-DD hh:mm:ss',
                </div>
              <div class="highlight">
                
              </div>
            </div>
            <div class="demo-block-control">
              <span>显示代码</span>
            </div>
          </div>

        </article>


      </div>

    </div>
    
<!-- end -->
<script type="text/html" id="code1">
<div class="s-header flex white">
    <div class="w-3em" onclick="dm.back()"><i class="if icon-angle-left"></i></div>
    <div class="flex-1 ellipsis">我的消息</div>
    <div class="w-3em"></div>
</div>

<div class="s-footer flex tac fz-small c-a pl-4 pr-4 bgc-w">
    <a href="/list/index.html" class="flex-1 pt-3 por ">
        <div class="fze-16 lh-11">
            <i class="if icon-home off"></i>
            <i class="if icon-home on"></i>
        </div>
        <div>主页</div>
    </a>
    <a href="/discover/" class="pt-3 por flex-1 ">
        <div class="fze-16 lh-11">
            <i class="if icon-satellite off"></i>
            <i class="if icon-satellite on"></i>
        </div>
        <div>发现</div>
    </a>
    <a href="/msg/index.html" class="flex-1 pt-3 por active">
        <div class="fze-16 lh-11">
            <i class="if icon-msg-dot-3-square off">
                <i class="icon-red-dot red-dot-msg hide poa r--5 t--1"></i>
            </i>
            <i class="if icon-msg-dot-3-square-fill on">
                <i class="icon-red-dot red-dot-msg hide poa r--5 t--1"></i>
            </i>
        </div>
        <div>消息</div>
    </a>
    <a href="/my/index.html" class="flex-1 pt-3 por  ">
        <div class="fze-16 lh-11">
            <i class="if icon-user-circle off"></i>
            <i class="if icon-user-circle-fill on"></i>
        </div>
        <div>我的</div>
    </a>
</div>
</script>

<script type="text/html" id="code10">
<section>
    <p>普通按钮</p>
    <button class="btn-athens">btn-athens</button>
    <button class="btn-primary">btn-primary</button>
    <button class="btn-danger">btn-danger</button>
    <button class="btn-success">btn-success</button>
    <button class="btn-warning">btn-warning</button>
    <button class="btn-gray">btn-gray</button>
    <button class="btn-info">btn-info</button>
    <button class="btn-smoke">btn-smoke</button>
    <button class="btn-o">btn-o</button>
    <button class="btn-o c-primary">btn-o.c-primary</button>
    <button class="btn-o c-danger">btn-o.c-danger</button>
    <button class="btn-o btn-small">btn-small</button>
    <button class="btn-o btn-large">btn-large</button>
    <button class="btn-o btn-tiny">btn-tiny</button>
    <button class="btn-o btn-square">btn-square</button>
    <a href="javascript:;" class="btn btn-o btn-link c-primary">a btn-link</a>
    <a href="javascript:;" class="btn btn-primary">a btn-link</a>

</section>
<section>
    <p>块状按钮</p>  
    <p><button class="btn-primary btn-block">btn-block</button></p>
    <p><button class="btn-o c-primary btn-block">提交</button></p>
</section>
</script>

<script type="text/html" id="code11">
<section>
    <p>tag</p>
    <span class="tag-danger m-5">tag-danger</span>
    <span class="tag-light m-5">tag-light</span>
    <span class="tag-gray m-5">tag-gray</span>
    <span class="tag-primary m-5">tag-primary</span>
    <span class="tag-success m-5">tag-success</span>
    <span class="tag-warning m-5">tag-warning</span>
    <span class="tag-o tag-risk-a m-5">tag-o tag-risk-a</span>
    <span class="tag-o tag-risk-b m-5">tag-o tag-risk-a</span>
    <span class="tag-o tag-risk-c m-5">tag-o tag-risk-a</span>
    <span class="tag-danger tag-small m-5">tag-small</span>

</section>
<section>
    <p>红点</p>
    <i class="icon-red-dot"></i>
</section>

</script>

<script type="text/html" id="code12">

<ul class="msg-sys-list mb-8">
  <li class="pt-6 pb-6 bb">
      <div class="tac fz-small c-a">2017-01-04 10:39</div>
      <a href="/info/notice_detail/id/285.html" class="db m-7 panel round">
          <div class="por fwb fz-medium mb-6"><i class="icon-red-dot hide mr-3"></i>2017股权众筹进入筹智时代，“众智众测”为投资保驾护航</div>
          
          <div class="cover mb-6" style="background-image: url('http://7xjckn.com2.z0.glb.qiniucdn.com/2017-01-04_586c604c2934f.jpg');"></div>
          
          <div class="c-a bb pb-6 mb-6">2016年的最后一周聚募APP做了本年度的最后一次更新。</div>
          <div class="flex space-between c-8">
              <div>阅读全文</div>
              <div><i class="if icon-angle-right"></i></div>
          </div>
      </a>
  </li>
</ul>

</script>




<script type="text/html" id="code32">
var mAlert = function(){
    dm.alert('我是一本正经的')
};
var mConfirm = function(){
    dm.confirm('你决定要不要陪我',{},function(){
        alert('nice')
    },function(){
        alert('oh no')
    })
};
var mConfirm2 = function(){
    dm.confirm('你决定要不要陪我',{yes:'确定吗',no:'不确定吗'})
};
var mNotice = function(){
    dm.notice('你有一条未读消息',function(){

    });
};
var mLoading = function(){
    dm.loading('死命加载中');
};
var mLoading2 = function(){
    dm.loading('hide');
};
</script>


<script type="text/html" id="code35">
//tab
$('.tabs').tab();

</script>





  


  <script src="../vendor/jquery/jquery-2.1.4.min.js"></script>
  <script src="../vendor/highlight/highlight.pack.js"></script>
  <!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script> -->
  <script src="../vendor/webuploader/webuploader.html5only.min.js"></script>
  <script src="../assets/js/dm.base.js"></script>
  <script src="http://cdn.bootcss.com/clipboard.js/1.5.12/clipboard.js"></script>
  <script src="../vendor/laydate/laydate.js"></script>
  <script src="./js/docs.js"></script>


    
  <script>
  var escapeHtml = function (s) {
        return s ? s.replace(
            /[&<>'"]/g,
            function (c, offset, str) {
                if (c === "&") {
                    var substr = str.substring(offset, offset + 6);
                    if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
                        // already escaped, do not re-escape
                        return c;
                    }
                }
                return "&" + {
                    "&": "amp",
                    "<": "lt",
                    ">": "gt",
                    "'": "apos",
                    '"': "quot"
                }[c] + ";";
            }
        ) : "";
    };
  $(function(){
    var codehighlight = function(){
      $('.code-content').each(function(i,item){

        var targetID = $(this).data('target');
        var str = $.trim($('#'+targetID).html());
        var parent = $(this).parent();
        var width = parent.width();
        console.log('width',width,targetID,parent)
        var show = $('<pre style="width:100%"><code></code></pre>').appendTo(parent);
        str = escapeHtml(str);
        show.find('code').html(str);
        hljs.highlightBlock(show.find('code')[0]);
      });

      $('.source').each(function(i,item){

        var html = $(this).html();
        var $highlight = $(this).parent().find('.highlight');
        
        var show = $('<pre style=""><code class="html"></code></pre>').appendTo($highlight);
        var str = escapeHtml(html);
        show.find('code').html(str);
        hljs.highlightBlock(show.find('code')[0]);
      });

    };
    codehighlight();
    $('#nav-list').stick();
      var uploader = WebUploader.create({
       
        // 文件接收服务端。
        server: 'http://webuploader.duapp.com/server/fileupload.php',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });
    $('.backtop').backtop();
    //$('.books').scrollAnchor();

   
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();
    window.doSomething = function(){
      alert('Oh my god')
    };

    $(document).on('click',"[data-dismiss='popover']",function(e){
      var id = $(this).data('target');
      //console.log(111,id)
      
      $(id).trigger('click');

    });
    $(document).on('click',"[data-role='action1']",function(e){
      var id = $(this).data('target');
      console.log(111,id)
      e.preventDefault();
      e.stopPropagation();
      $(id).trigger('click');
      alert('真的删掉了')

    });

    document.getElementById('datepicker1').onclick = function(){
      
      laydate({
        format: 'YYYY-MM-DD',
        istoday: false,
        isclear: true, //是否显示清空
        istoday: false, //是否显示今天
        festival: false, //是否显示节日
        min: '1900-01-01 00:00:00', //最小日期
        max: '2099-12-31 23:59:59', //最大日期
        //start: '2014-6-15 23:00:00',  //开始日期
        choose: function(dates){ 
          // 选择日期完毕的回调
          alert('得到：'+dates);
             
        }
       });
    }

  });

  </script>
  </body>
</html>
